import React from 'react';
import './style.css'
// event
import emitter from '../../util/events';
// ant
import { Form, Row, Col, Select, Checkbox, Table, Input, Icon, Popconfirm, Button } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
class TransportForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            DeliveryModeTemplateDisabled: false,
            inland: [],
            international: []
        };
    }

    componentDidMount() {
        // data事件通讯
        emitter.addListener('setFormData', () => {
            this.props.form.validateFieldsAndScroll((errors, values) => {
                if (!errors) {
                    this.props.onChange({ transport: this.props.form.getFieldsValue() })
                } else {
                    this.props.onChange(false)
                }
            })
        });
    }
    
    // 自定义发货方式 onChange
    CustomDeliveryMethod = (e) => {
        this.setState({
            DeliveryModeTemplateDisabled: !this.props.form.getFieldValue('CustomDeliveryMethod')
        })
        if (!this.props.form.getFieldValue('CustomDeliveryMethod')) {
            this.props.form.resetFields('DeliveryModeTemplate')
        }
    }
    
    // 删除表格
    onInlandDelete = (key) => {
        const inland = [...this.state.inland];
        this.setState({ inland: inland.filter(item => item.key !== key) });
    }
    
    onInternationalDelete = (key) => {
        const international = [...this.state.international];
        this.setState({ international: international.filter(item => item.key !== key) });
    }
    // 添加表格
    inlandHandleAdd = () => {
        const { inland } = this.state;
        const newData = {
            key: [...inland].length + 1,
            Name: null,
            Freight: null,
            ExtraCharge: null,
            Surcharge: null
        };
        this.setState({
            inland: [...inland, newData],
        });
    }
    
    internationalHandleAdd = () => {
        const { international } = this.state;
        const newData = {
            key: [...international].length + 1,
            Name: null,
            Freight: null,
            ExtraCharge: null,
            Surcharge: null
        };
        this.setState({
            international: [...international, newData],
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form
        const formItemLayout = {
            labelCol: {
                sm: { span: 5 },
            },
            wrapperCol: {
                sm: { span: 18 },
            },
        };

        const inlandColumns = this.state.DeliveryModeTemplateDisabled ? [
            {
                title: '名称',
                dataIndex: 'Name',
                key: 'Name',
                align: 'center',
                render(text, record) {
                    return getFieldDecorator(`Name_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '运费',
                dataIndex: 'Freight',
                key: 'Freight',
                align: 'center',
                width: 150,
                render(text, record) {
                    return getFieldDecorator(`Freight_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '附加费',
                dataIndex: 'ExtraCharge',
                key: 'ExtraCharge',
                align: 'center',
                width: 150,
                render(text, record) {
                    return getFieldDecorator(`ExtraCharge_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '',
                dataIndex: '',
                width: 50,
                align: 'center',
                render: (text, record) => {
                    return (
                        this.state.inland.length > 1 ?
                            (
                                <Popconfirm title="确定删除?" onConfirm={() => this.onInlandDelete(record.key)}>
                                    <Icon type="minus-circle" />
                                </Popconfirm>
                            ) : null
                    );
                },
            }
        ] : [
                {
                    title: '名称',
                    dataIndex: 'Name',
                    key: 'Name',
                    align: 'center'
                },
                {
                    title: '运费',
                    dataIndex: 'Freight',
                    key: 'Freight',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`Freight_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                },
                {
                    title: '附加费',
                    dataIndex: 'ExtraCharge',
                    key: 'ExtraCharge',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`ExtraCharge_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                },
                {
                    title: 'AK,HI,PR额外收费',
                    dataIndex: 'Surcharge',
                    key: 'Surcharge',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`Surcharge_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                }
            ]

        const internationalColumns = this.state.DeliveryModeTemplateDisabled ? [
            {
                title: '名称',
                dataIndex: 'Name',
                key: 'Name',
                align: 'center',
                render(text, record) {
                    return getFieldDecorator(`Name_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '运费',
                dataIndex: 'Freight',
                key: 'Freight',
                align: 'center',
                width: 150,
                render(text, record) {
                    return getFieldDecorator(`Freight_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '附加费',
                dataIndex: 'ExtraCharge',
                key: 'ExtraCharge',
                align: 'center',
                width: 150,
                render(text, record) {
                    return getFieldDecorator(`ExtraCharge_${record.key}`)(
                        <Input placeholder="请输入" />
                    )
                }
            },
            {
                title: '',
                dataIndex: '',
                width: 50,
                align: 'center',
                render: (text, record) => {
                    return (
                        this.state.international.length > 1 ?
                            (
                                <Popconfirm title="确定删除?" onConfirm={() => this.onInternationalDelete(record.key)}>
                                    <Icon type="minus-circle" />
                                </Popconfirm>
                            ) : null
                    );
                },
            }
        ] : [
                {
                    title: '名称',
                    dataIndex: 'Name',
                    key: 'Name',
                    align: 'center'
                },
                {
                    title: '运费',
                    dataIndex: 'Freight',
                    key: 'Freight',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`Freight_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                },
                {
                    title: '附加费',
                    dataIndex: 'ExtraCharge',
                    key: 'ExtraCharge',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`ExtraCharge_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                },
                {
                    title: 'AK,HI,PR额外收费',
                    dataIndex: 'Surcharge',
                    key: 'Surcharge',
                    align: 'center',
                    width: 150,
                    render(text, record) {
                        return getFieldDecorator(`Surcharge_${record.key}`, {
                            initialValue: text
                        })(
                            <Input placeholder="请输入" />
                        )
                    }
                }
            ]
        
            // 自定义发货方式是否勾选
        let DeliveryModeTemplateDisabled = this.state.DeliveryModeTemplateDisabled;

        return (
            <div>
                <FormItem label="发货方式模板" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={8}>
                            {
                                getFieldDecorator('DeliveryModeTemplate', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '必填'
                                        }
                                    ]
                                })(
                                    <Select className="w100" disabled={DeliveryModeTemplateDisabled} placeholder="请选择">
                                        <Option value="init">HK HK ES 手提</Option>
                                    </Select>
                                )
                            }
                        </Col>
                        <Col span={8}>
                            {
                                getFieldDecorator('CustomDeliveryMethod')(
                                    <Checkbox onChange={this.CustomDeliveryMethod}>自定义发货方式</Checkbox>
                                )
                            }
                        </Col>
                    </Row>
                </FormItem>

                {
                    /* 自定义运输方式 */
                    this.props.form.getFieldValue('CustomDeliveryMethod') &&
                    <FormItem label="自定义运输方式" {...formItemLayout}>
                        <Row gutter={8} className="gray">
                            <Col span={24}>
                                <FormItem label="发往区域" {...formItemLayout}>
                                    <Row gutter={8}>
                                        <Col span={8}>
                                            {getFieldDecorator('SendArea')(
                                                <Select className="w100">
                                                </Select>
                                            )}
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="限制发往区域" {...formItemLayout}>
                                    <Row gutter={8}>
                                        <Col span={8}>
                                            {getFieldDecorator('LimitSendArea')(
                                                <Select className="w100">
                                                </Select>
                                            )}
                                        </Col>
                                    </Row>
                                </FormItem>
                                <FormItem label="发货天数(Dispatch Time Max)" {...formItemLayout}>
                                    <Row gutter={8}>
                                        <Col span={8}>
                                            {getFieldDecorator('DispatchTimeMax')(
                                                <Select className="w100">
                                                </Select>
                                            )}
                                        </Col>
                                        <Col span={16}>
                                            {getFieldDecorator('GetitFast')(
                                                <Checkbox>快速寄送(GetitFast)</Checkbox>
                                            )}
                                        </Col>
                                    </Row>
                                    <Row gutter={8}>
                                        {getFieldDecorator('ForwardingClause')(
                                            <Checkbox>运输条款已在刊登描述中</Checkbox>
                                        )}
                                    </Row>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                }

                <FormItem label="国内运输" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={24}>
                            {
                                DeliveryModeTemplateDisabled && <Button className="editable-add-btn" onClick={this.inlandHandleAdd}>添加</Button>
                            }
                            <Table
                                bordered={true}
                                columns={inlandColumns}
                                pagination={false}
                                dataSource={this.state.inland}></Table>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem label="国际运输" {...formItemLayout}>
                    <Row gutter={8}>
                        <Col span={24}>
                            {
                                DeliveryModeTemplateDisabled && <Button className="editable-add-btn" onClick={this.internationalHandleAdd}>添加</Button>
                            }
                            
                            <Table
                                bordered={true}
                                columns={internationalColumns}
                                pagination={false}
                                dataSource={this.state.international}></Table>
                        </Col>
                    </Row>
                </FormItem>
            </div>
        )
    }
}

export default Form.create()(TransportForm)